<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    [[ message]]
    <hr>
    <a v-bind:href="next">点击有惊喜</a>
    <a :href="next">点击有惊喜</a>
    <hr>
    <a href="#" v-if="isLogin">个人中心</a>
    <a href="#" v-else>登录</a>
    <hr>
    <a href="#" v-if="level===1">皇帝</a>
    <a href="#" v-else-if="level===2">皇亲</a>
    <a href="#" v-else-if="level===3">国戚</a>
    <a href="#" v-else-if="level===4">大臣</a>
    <a href="#" v-else>平民</a>
    <hr>
    <span v-if="seen">if</span>
    <span v-show="seen">show</span>
    <hr>
    <ul>
        <!-- v-for="变量名 in 列表变量名" -->
        <!--<li v-for="shop in shops">[[shop]]</li>-->
        <!-- v-for="(列表元素,索引) in 列表变量名" -->
        <!--<li v-for="(shop,index) in shops">第[[index+1]]家店:[[shop]]</li>-->
        <li v-for="(value,name) in object">[[name]]:[[value]]</li>
    </ul>
    <hr>
    <button @click="counter+=1">Add 1</button>
    <span>this is [[counter]]</span>
    <button v-on:click="login">注册</button>
    <hr>
    <button v-on:click="sayHi('hi')">sayHi</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        delimiters: ['[[',']]'],
        data:{
            message: 'Hello Vue!',
            next:'http://www.baidu.com',
            isLogin:true,
            level:2,
            seen:false,
            // shops:['绵阳','成都','重庆','北京','上海'],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            counter:1
        },
        methods:{
            login:function(){
                alert('登录中~~~')
            },
            sayHi:function(msg){
                alert(msg)
            },
        }
    })
</script>
</html>